<template>
  <div class="main">
      
      <div class="from">
          <p>意见箱：📧<span style="font-size:10px;margin-left:10px;color:#a19f9f">您的意见一定会快速到达</span></p>
          <div class="div">
              <label>区块：<span style="font-size:10px;margin-left:10px;color:#a19f9f">如果区块外可发邮件至746381864@qq.com</span></label>
            <el-select  v-model="value"   placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <label>详细内容：<span style="font-size:10px;margin-left:10px;color:#a19f9f">内容控制在100字内</span></label>
            <textarea v-model="content" rows="5"></textarea>
            <label>联系方式：<span style="font-size:10px;margin-left:10px;color:#a19f9f">例如:qq:746381864 或 wx:B3B3in</span></label>
            <input v-model="method" type="text">
            <label></label>
            <el-button size="mini" @click="send" type="warning">发送</el-button>
          </div>
     </div>
  </div>
</template>

<script>
    import qs from "qs"
export default {
    data(){
        return{
            content:null,
            method:null,
            options: [
                {
                    value: '意见反馈',
                    label: '意见反馈'
                },
                {
                    value: '友情链接',
                    label: '友情链接'
                },
                {
                    value: '侵权反馈',
                    label: '侵权反馈'
                },
        ],
                value:[]
        
        }

    },
       methods:{
        send(){
            if(this.content.length>101){
                this.$alert("内容控制在100字以内")
                return
            }
            if(this.content==null||this.method==null){
                this.$alert("请填完善所有内容")
            }

            var obj ={
                content:this.content,
                value:this.value,
                method:this.method
            }
            this.$http.post("/email/send",qs.stringify(obj)).then(va =>{
                this.$alert(va.data.message)
            })
        }
    },
          mounted(){
   document.documentElement.scrollTop=0
  },
}
</script>

<style scoped lang="less">
    .main{
        width: 100%;
        height: auto;
        position: relative;
        padding-top: 150px;
        .from{
            width: 800px;
            height: auto;
            background: #ffcd35;
            box-shadow: 1px 1px 1px 1px silver;
            border-radius: 5px;
            margin: 0px auto;
            padding: 10px;
        }
        .div{
            width: 100%;
            height: auto;
            margin-top: 10px;
            padding: 10px;
            label{
                display: block;
                margin: 10px;
            }
        }
    }
     @media  screen and (max-width: 1300px) {
        .main{
            padding-top: 0px !important;
            width: 80% !important;
        }
    
     
     }
</style>